<template>
    <el-card class="box-card">
      <itable
      :table="tconfig.tableConfig"
      :tableData="tconfig.tableData"
      :page-bean="tconfig.pageBean"
      @pageChange="pageChange"
      @handelEdit="handelEdit"
      @handelDel="handelDel"
      >
        <template #headerbtn>
          <el-button type="primary" plain @click="chilkadd" icon="Plus">添加</el-button>
        </template>
      </itable>

      <el-dialog
      :title="type?'新增':'编辑'"
      v-model="dialogVisible"
      @close="resetForm(formRef)"
      width="40%">
      <el-form :model="formInline" :rules="rules" ref="formRef" class="demo-form-inline">
        <el-form-item label="作业种类名称" prop="name" style="width: 90%;">
            <el-input v-model="formInline.name" placeholder="请输入作业种类名称"/>
        </el-form-item>
    </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(formRef)">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
        </span>
      </template>
    </el-dialog>
    </el-card>
  </template>

  <script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import { PageBean } from "@/utils/page-bean";
  import useCurrentInstance from '@/utils/useCurrentInstance'
  import itable from '@/components/table/table.vue'
  import type { FormInstance } from 'element-plus'
  import { ElMessageBox } from 'element-plus'

  const { proxy } = useCurrentInstance()
  const formRef = ref<FormInstance>()
  let dialogVisible = ref(false)
  let option:any = ref([])
  let type = ref(true)
  let formInline = reactive({ name:'' })
  const rules = reactive({
    name: [
      { required: true, message: '请选择作业种类名称', trigger: 'blur' },
    ],
  })
  let form = reactive({
    page:1,
    size:10
  })

  const tconfig = reactive({
    tableConfig: {} as {loading:boolean,[propName:string]:any},
    tableData: [] as any[],
    pageBean: new PageBean(10, 1, 0),
  })

  // 新增
  const chilkadd = () => {
    type.value = true
    dialogVisible.value = true
  }

  // 表格-编辑
  const handelEdit = (a, b, id) => {
    type.value = false
    dialogVisible.value = true
    proxy.$api.getDangerTypeDetail({id:b.id}).then(res => {
      formInline.name = res.result.name
      formInline.id = res.result.id
    })
  }
  // 表格-删除
  const handelDel = (a, b, id) => {
    ElMessageBox.confirm(
      '此操作将永久删除该数据,是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      proxy.$api.getDangerTypeDel({id:b.id}).then(res => {
        if(res.code == 200){
          proxy.$message.success(res.msg)
          getRecordDanger()
        }
      })
    }).catch(() => {
      proxy.$message({
        type: 'info',
        message: '已取消删除',
      })
    })

  }

  // 提交
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        if(type.value){
          proxy.$api.getDangerTypeCreate(formInline).then(res => {
            if(res.code == 200){
              proxy.$message.success(res.msg)
              formEl.resetFields()
              dialogVisible.value = false
              getRecordDanger()
            }
          })
        }else{
          proxy.$api.getDangerTypeUpdate(formInline).then(res => {
            if(res.code == 200){
              proxy.$message.success(res.msg)
              formEl.resetFields()
              dialogVisible.value = false
              getRecordDanger()
            }
          })
        }
      } else {
        return false
      }
    })
  }
  // 清空
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
  }

  // 分页
  const pageChange = () => {
    getRecordDanger()
  }
  // 台账列表
  const getRecordDanger = () => {
    tconfig.tableConfig.loading = true
    form.page = tconfig.pageBean.pageIndex
    proxy.$api.getDangerTypeList(form).then(res =>{
      tconfig.tableData=res.result.lists
      tconfig.tableConfig.loading = false
      tconfig.pageBean.Total=res.result.total_rows
    }).catch(err => tconfig.tableConfig.loading = true)
  }
  const getCommonDanger = () => {
    option.value = []
    proxy.$api.getCommonDanger().then(res => {
      option.value = res.result
    })
  }
  getCommonDanger()
  getRecordDanger()

  // 初始化表格
  const initTable = () => {
  tconfig.tableConfig = {
    loading: true,
    hasSelect: false,
    hasIndex: true,
    hasOperation: true,
    hasSearch: true,
    hasPage: true,
    headerShowBtn:false,
    tr: [
      {
        label: "作业种类",
        prop: "name",
      }
    ],
    operation:{
      label:'操作',
      data:[
        { label:'编辑', type:'', icon:'EditPen', Fun:'handelEdit', id: 1 },
        { label:'删除', type:'danger', icon:'Delete', Fun:'handelDel', id: 2 }
      ]
    }
  }
  }
  initTable()
  </script>

  <style lang='scss' scoped>
  :deep(.el-dialog__body){
  .el-form>.el-form-item{
    width: 45%;
    margin-bottom: 20px;
    margin-left: 10px;
  }
  .el-select{
    width: 100%;
  }
  }
  .dialog-footer{
    width: 100%;
    display: flex;
    justify-content: center;
    .el-button{
      width: 15%;
    }
  }
  </style>
